<template>
    <view class="yellow-white">
        <cu-custom bgColor="bg-yellow2" :isBack="true">
            <block slot="content">订单详情</block>
        </cu-custom>

        <!--详情-->
        <view class="bg-white margin-xs circle-corner">
            <view class="cu-bar">
                <view class="padding-lr">
                    <view >{{dataInfo.train_number_time}} {{dataInfo.train_number_time_week}} {{dataInfo.departure_time}}发车</view>
                    <view class="text-sm text-gray">{{dataInfo.start_address}} - {{dataInfo.end_address}}</view>
                </view>
                <view class="padding-lr">
                    <text class="text-sm text-orange"></text><text class="cuIcon-right"></text>
                </view>
            </view>
            <view class="cu-bar top-line min-height35">
                <view class="padding-lr">
                    <text class="cuIcon-edit"></text>
                    <text class="padding-lr-xs text-sm">
                        发车前30分钟<text class="text-green">可在线退票</text>
                    </text>
                </view>
                <view class="padding-lr" @click="showXiangQing()">
                    <text class="text-sm text-orange">详情</text>
                    <text class="cuIcon-right"></text>
                </view>
            </view>
        </view>
        <!--详情模态框-->
        <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
            <view class="cu-dialog" style="" @tap.stop="">
                <scroll-view scroll-x class="bg-white nav">
                    <view class="flex text-center">
                        <view class="cu-item flex-sub" :class="1==type?'text-orange cur':''" @tap="tabSelect(1)" >
                            <view>退票规则</view>
                        </view>
                        <view class="cu-item flex-sub" :class="2==type?'text-orange cur':''" @tap="tabSelect(2)" >
                            <view>服务须知</view>
                        </view>
                    </view>
                </scroll-view>
                <view style="width: 100%; height: 500px; margin: 12px;">
                    <view>
                        <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>
                    </view>
                </view>
            </view>
        </view>

        <!--乘车人-->
        <view class="bg-white margin-xs circle-corner">
            <view class="cu-bar min-height35">
                <view class="padding-lr">
                    <text>乘车人</text>
                </view>
               
            </view>
            <view class="cu-bar top-line" v-for="(pa, index) in selcetnum" :key="index">
                <view class="padding-lr flex justify-center align-center">
                    <text class="cuIcon-roundclosefill text-orange" @click="delPassenger(pa, index)"></text>
                    <view class="padding-lr text-sm">
                        <view>{{pa.name}}</view>
                        <view>{{pa.id_card}}</view>
                    </view>
                </view>
               <!-- <view class="padding-lr">
                    <button @click="setHolder(pa)" class="cu-btn line-orange sm" :class="pa.isHolder ? '' : 'line-gray'">{{pa.isHolder ? '取票人' : '设为取票人'}}</button>
                </view> -->
            </view>
        </view>
		<!--乘车人-->
		<view class="bg-white margin-xs circle-corner">
		    <view class="cu-bar min-height35">
		        <view class="padding-lr">
		            <text>核销码</text>
		        </view>
		       
		    </view>
		    <view class="cu-bar top-line">
		        <view class=" flex justify-center align-center" style="margin: 0 auto;">
					<swiper style="height: 300rpx;width: 700rpx;margin: 0 auto;" class="swiper" :indicator-dots="indicatorDots" :autoplay="false" :interval="interval" :duration="duration">
					    <swiper-item v-for="(img, index) in code" :key="index">
					        <image :src="img.ver_code_url" mode="" style="padding: 30rpx;width: 300rpx;height: 300rpx;display: block;margin: 0 auto;"></image>
					    </swiper-item>
					</swiper>
		          
		        </view>
		       <!-- <view class="padding-lr">
		            <button @click="setHolder(pa)" class="cu-btn line-orange sm" :class="pa.isHolder ? '' : 'line-gray'">{{pa.isHolder ? '取票人' : '设为取票人'}}</button>
		        </view> -->
		    </view>
		</view>

        <!--取票电话-->
        <view class="bg-white margin-xs circle-corner">
            <view class="cu-bar min-height35" style="align-items: center;">
                <view class="padding-lr flex">
                    <text class="text-gray padding-right-sm">取票电话</text> 
					<input type="text" style="width: 400rpx;" v-model="phone" placeholder="请输入取票电话" placeholder-style="color:#999;font-size:26rpx" />
                </view>
                <view class="padding-lr">
                    <text class="cuIcon-addressbook text-orange"></text>
                </view>
            </view>
        </view>
		
        <!--购买保险-->
        <view class="bg-white margin-xs circle-corner">
            <view class="cu-bar min-height35">
                <view class="padding-lr">
                    <text>出行意外保障</text>
                    <text class="cuIcon-info text-orange padding-lr-xs"></text>
                </view>
            </view>
            <view class="flex justify-around align-center top-line padding-xs" style="padding: 20rpx 0;">
                <view class="radius padding-lr-xs light bg-gray" :class="selectedInsurance ? selectedInsurance.id === obj.id ? 'bg-yellow': '' : ''"
                      v-for="(obj, index) in insurance" :key="obj.id">
                    <view class="padding-xs flex justify-center align-center">
                        <text class="cuIcon-roundcheck text-gray"></text>
                        <view class="padding-lr-xs text-sm text-black">
                            <view>
                                {{obj.InsuranceAmount}}万保额
                            </view>
                            <view>
                                <text class="text-orange2 text-sm padding-lr-xs">¥{{obj.price}}</text> x 0份
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="cu-form-group top-line min-height35 text-sm" v-if="selectedInsurance">
                <view class="title ">发票接收邮箱</view>
                <input placeholder="如需电子发票，请填写邮箱" name="input"/>
            </view> -->
        </view>
        
       
        <!--费用明细模态框-->
        <view class="cu-modal bottom-modal z-index1100" :class="[modalName=='detailModal'?'show':'']" @tap="hideModal">
            <view class="cu-dialog" @tap.stop="">
                <view class="bg-white">
                    <view class="padding">费用明细</view>
                    <view class="cu-bar padding-lr-sm top-line">
                        <view>最高票面价</view>
                        <view class="text-orange2">¥52 x 1人</view>
                    </view>
                    <view class="cu-bar padding-lr-sm top-line">
                        <view>汽车乘意险</view>
                        <view class="text-orange2">¥5 x 1人</view>
                    </view>
                </view>
                <view class="cu-bar"></view>
            </view>
        </view>
        <!--最底下按钮-->
        <view class="flex bottom-fix z-index1101">
            <view class="cu-bar bg-white half-width" @click="detail()">
                <view class="padding-lr-sm">
                    <view>
                        <text class="text-sm text-orange2">¥</text>
                        <text class="text-lg text-orange2">{{dataInfo.amount_real}}</text>
                        <text class="text-sm text-gray padding-lr-xs">共{{selcetnum.length}}人</text>
                    </view>
                    <view class="text-sm text-gray">订单总价</view>
                </view>
               <!-- <view class="padding-lr-sm flex justify-center align-center">
                    <text class="text-sm text-gray">明细</text>
                    <view class="padding-lr-xs cuIcon-fold rotate" :class="detailAnimation? 'rotate2': ''"></view>
                </view> -->
            </view>
            <view class="cu-bar bg-gradual-orange half-width justify-center" @click="goPay()" >申请退款</view>
        </view>
    </view>
</template>

<script>
    import uParse from '../common/u-parse/u-parse.vue'
    export default {
        name: "OrderDetail",
        components: { uParse},
        data() {
            return {
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				id:'',
				dataInfo:'',
                passenger: [],
				phone:'',
				selcetnum:[],
				isShowselcet:[],
				type:1,
                insurance: [
                    {
                        id: 'aaa',
                        InsuranceAmount: '15',
                        price: '3'
                    },
                    {
                        id: 'bbb',
                        InsuranceAmount: '25',
                        price: '5'
                    },
                    {
                        id: 'ccc',
                        InsuranceAmount: '50',
                        price: '10'
                    }
                ],
				code:'',
                // 是否开启明细按钮的动画
                detailAnimation: false,
                selectedInsurance: null,
                modalName: '',
                xiangqing: true,
                TabCur: 0,
                article: '',
				rider_id:'',
				code:''
            }
        },
		onLoad(e) {
			let that = this
			that.id = e.id
			
		},
		onShow() {
			let that = this
			that.getData()
		},
        methods: {
			getData(){
				let that = this
				that.tui.request("api.auth.ticket/orderDetail", "POST", {order_no: that.id}, false, false, false).then((res) => {
					if (res.code == 1) {
						that.dataInfo=res.data.info
						that.selcetnum = res.data.info.people_list
						that.code = res.data.info.code
						console.log(that.code)
						// that.passenger.map((item,index)=>{
						// 	item.status = false
						// })
					}
				}).catch((res) => {
				
				})
			},
			getXieyi(){
				let that = this
				that.tui.request("api.ticket/agreementAll", "POST", {type: that.type}, false, false, false).then((res) => {
					if (res.code == 1) {
						that.article = res.data.content
					}
				}).catch((res) => {
				
				})
			},
			getParam(path, name) {
				  var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");   
				  if (reg.test(path))  
				  return unescape(RegExp.$2.replace(/\+/g, " ")); 
				  return "";    
			},
			wetLogin(){
				let that = this
				that.tui.request("api.login/wechat_in", "POST", {code: that.code}, false, false, false).then((res) => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.info.token)
						window.location.href = 'https://reh5.wyc168.com/#/pages/home/orderDetail/OrderDetail?id='+that.id
					}
				}).catch((res) => {
				
				})
			},
			getSelect(e){
				let that = this
				that.passenger.map((item,index)=>{
					if(item.id==e.id){
						item.status = !item.status
					}
				})
				if(!that.selcetnum.includes(e)){
					that.selcetnum.push(e)
				}else{
					that.selcetnum.map((item,index)=>{
						if(item.id==e.id){
							that.selcetnum.splice(index,1)
						}
					})
				}
				
			},
			
			goeidt(e){
				console.log(e)
				uni.navigateTo({url: '/pages/home/orderDetail/AddPassenger?data='+JSON.stringify(e)+"&type=2"})
			},
            // 明细
            detail() {
                // this.detailAnimation = !this.detailAnimation
                // if (this.detailAnimation) {
                //     this.modalName = 'detailModal'
                // } else {
                //     this.modalName = null
                // }
            },
            // 选择保险
            selInsurance(obj) {
                if (this.selectedInsurance == obj) {
                    this.selectedInsurance = null
                    return
                }
                this.selectedInsurance = obj;
            },
            // 设置取票人
            setHolder(pa) {
                if (pa.isHolder) {
                    return
                }
                this.passenger.forEach(p => {
                    p.isHolder = false;
                })
                pa.isHolder = true;
            },
            // 显示详情模态框
            showXiangQing() {
                this.modalName = 'bottomModal'
				this.type=1
				this.getXieyi()
            },
            // 隐藏modal
            hideModal(e) {
                this.modalName = null
            },
            tabSelect(e) {
                this.type = e
				this.article = ''
				this.getXieyi()
                // this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            },
            // 显示添加乘客模态框
            showAddPassenger() {
                this.modalName = 'addPassengerModal'
            },
            showTuJingZhan() {
                this.modalName = 'tuJingZhanModal'
            },
            delPassenger(pa, index) {
                this.selcetnum.splice(index, 1)
				this.passenger.map((item,index)=>{
					if(item.id ==pa.id){
						item.status = false
					}
				})
            },
            goProtocol() {
                uni.navigateTo({url: '/pages/richText/RichText'})
            },
            goPay() {
				let that = this
				that.tui.request("api.auth.ticket/refund", "POST", {order_no: that.id}, false, false, false).then((res) => {
					that.tui.toast(res.info)
					if (res.code == 1) {
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}
				}).catch((res) => {
				
				})
            },
            // 去添加乘客页面
            goAddPassenger() {
                uni.navigateTo({url: '/pages/home/orderDetail/AddPassenger?type=1'})
				this.modalName = null
				
            }
        }
    }
</script>

<style scoped>
    @import url("../common/u-parse/u-parse.css");
	.min-height35{min-height: 80rpx;}
    .yellow-white {
        background: linear-gradient(#ffdf40, #f4f4f4); /* 标准的语法（必须放在最后） */
    }
    .yellow-white2 {
        /*color: linear-gradient(#ffdf40, orange); !* 标准的语法（必须放在最后） *!*/
    }
    .half-width {
        width: 50%;
    }
    .rotate2 {
        transform:rotate(180deg);
        -moz-transform:rotate(180deg); /* Firefox 4 */
        -webkit-transform:rotate(180deg); /* Safari and Chrome */
        -o-transform:rotate(180deg); /* Opera */
    }

    .rotate {
        transition:width 0.2s, height 0.2s;
        -moz-transition:width 0.2s, height 0.2s, -moz-transform 0.2s; /* Firefox 4 */
        -webkit-transition:width 0.2s, height 0.2s, -webkit-transform 0.2s; /* Safari and Chrome */
        -o-transition:width 0.2s, height 0.2s, -o-transform 0.2s; /* Opera */
    }
    .z-index1100 {
        z-index: 1100;
    }
    .z-index1101 {
        z-index: 1101;
    }
</style>
